<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;background: red;position: absolute;left:0;top:50px;}
    </style>
</head>
<body>
    <input type="button" id="btn1" value="开始">
    <input type="button" id="btn2" value="停止">
    <div class="box"></div>
</body>
<script src="./jquery.js"></script>
<script>

    // 延迟执行
    // $("#btn1").click(function(){
    //     $(".box").delay(1000).animate({
    //         left:500
    //     },2000).delay(1000).animate({
    //         top:500
    //     },2000).delay(1000).animate({
    //         left:0
    //     },2000).animate({
    //         top:50
    //     },2000)
    // })

    $("#btn1").click(function(){
        $(".box").animate({
            left:500
        },2000).animate({
            top:500
        },2000).animate({
            left:0
        },2000).animate({
            top:50
        },2000)
    })

    $("#btn2").click(function(){
        $(".box").stop(false, true)
    })

    // stop(参数1,参数2)
    // 参数1：队列动画：等待中的动画
        // true：清除队列
        // false：不清除队列，默认值
    // 参数2：当前动画：正在执行的动画
        // true：立即运动到终点
        // false：立即停止，默认值

</script>
</html>